import 'package:flustars_flutter3/flustars_flutter3.dart';
import 'package:flutter/material.dart';
import 'package:flutter_taotaoshipin/pages/drama/drama_routes.dart';
import 'package:flutter_taotaoshipin/widget/load_image.dart';
import 'package:flutter_taotaoshipin/widget/my_app_bar.dart';
import 'package:flutter_taotaoshipin/widget/refresh_header.dart';
import 'package:flutter_taotaoshipin/widget/refresh_status_view.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'history_controller.dart';

class HistoryPage extends StatefulWidget {
  const HistoryPage({Key? key}) : super(key: key);

  @override
  State<HistoryPage> createState() => _HistoryPageState();
}

class _HistoryPageState extends State<HistoryPage> {
  final controller = Get.find<HistoryController>();
  final state = Get.find<HistoryController>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        centerTitle: '历史',
      ),
      body: RefreshStatusView(
        controller: controller,
        contentBuilder: (_) {
          return SmartRefresher(
            controller: controller.refreshController,
            // 下拉刷新
            enablePullDown: true,
            header: const RefreshHeader(),
            onRefresh: controller.onRefresh,
            child: CustomScrollView(
              slivers: [
                _buildHistory(),
              ],
            ),
          );
        },
      ),
    );
  }

  _buildHistory() {
    if (state.historyList.isEmpty) {
      return SliverToBoxAdapter();
    }

    return SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 17, vertical: 9),
      sliver: SliverGrid.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          crossAxisSpacing: 9,
          mainAxisSpacing: 9,
          mainAxisExtent: 133,
        ),
        itemBuilder: (_, index) {
          var model = state.historyList[index];
          return GestureDetector(
            onTap: () {
              // 跳转视频详情页
              Get.toNamed(DramaRoutes.detail, arguments: {
                'id': model.mainId,
                'title': model.dramaName,
                'sort': model.sort,
              });
            },
            child: Container(
              padding: EdgeInsets.all(9),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  Stack(
                    children: [
                      AspectRatio(
                        aspectRatio: 82 / 115,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: LoadImage(model.cover ?? ''),
                        ),
                      ),
                      Positioned(
                        left: 0,
                        bottom: 0,
                        right: 0,
                        child: Container(
                          width: double.infinity,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
                            gradient: LinearGradient(
                              colors: [
                                Colors.transparent,
                                Color(0x99000000),
                              ],
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                            ),
                          ),
                          child: Text(
                            '看至${model.sort}集',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(width: 9),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          model.dramaName ?? '',
                          style: TextStyle(
                            color: Color(0xFF333333),
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                          maxLines: 1,
                        ),
                        SizedBox(height: 6),
                        Expanded(
                          child: Text(
                            model.title ?? '',
                            style: TextStyle(
                              color: Color(0xFF999999),
                              fontSize: 12,
                            ),
                            maxLines: 3,
                          ),
                        ),
                        Text(
                          DateUtil.formatDateMs(model.ctime! * 1000),
                          style: TextStyle(
                            color: Color(0xFFB4B3B8),
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        itemCount: state.historyList.length,
      ),
    );
  }
}
